#app{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  --active-color:rgb(135, 206, 235);
  --inactive-color:#999;
}

.code_input{
  position: relative;
}

.input_box_list{
  display: flex;
}

.code_input input{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.input_box{
  position: relative;
  margin-right: 10px;
  width: 70px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 26px;
  color: #333;
}


.input_box:last-child{
  margin-right: 0;
}

.midline{

}
.midline::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height: 5px;
  border-radius: 3px;
  background-color: var(--inactive-color);
}

.midline.active::after{
  background-color: var(--active-color);
  animation: lineFlicker 2s linear infinite;
}


.underline{

}
.underline::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background-color: var(--inactive-color);
}
.underline.active::after{
  background-color: var(--active-color);
  animation: lineFlicker 2s linear infinite;
}
.underline.finish::after{
  background-color: var(--active-color);
}


.square{
  border: 1px solid var(--inactive-color);
  border-radius: 5px;
}


.square.active{
  border: 1px solid var(--active-color);
  animation: flicker 2s linear infinite;
}
.square.finish{
  border: 1px solid var(--active-color);
}


@keyframes flicker{
  0%{
    border: 1px solid var(--active-color);
  }
  25%{
    border: 1px solid rgba(135, 206, 235,.25);
    box-shadow: 0 0 2px rgba(135, 206, 235,.25);
  }
  50%{
    border: 1px solid rgba(135, 206, 235,.5);
    box-shadow: 0 0 5px rgba(135, 206, 235,.25);
  }
  75%{
    border: 1px solid rgba(135, 206, 235,.75);
    box-shadow: 0 0 7px rgba(135, 206, 235,.25);
  }
  100%{
    border: 1px solid var(--active-color);
    box-shadow: 0 0 10px rgba(135, 206, 235,.25);
  }
}

.square .line,.underline .line{
  position: absolute;
  width: 2px;
  height: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: var(--inactive-color);
  animation: lineFlicker 2s linear infinite;
}


@keyframes lineFlicker {
  0%{
    opacity: 1;
  }
  25%{
    opacity: .25;
  }
  50%{
    opacity: .5;
  }
  75%{
    opacity: .75;
  }
  100%{
    opacity: 1;
  }
}
